.clear-sky {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.cloudy {
  background: linear-gradient(135deg, #d7d2cc 0%, #304352 100%);
}

.rain {
  background: linear-gradient(135deg, #283e51 0%, #4b6cb7 100%);
}

.rain::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(white 2px, transparent 2px);
  background-size: 10px 30px;
  animation: rain-fall 1s linear infinite;
  opacity: 0.3;
}

.snow {
  background: linear-gradient(135deg, #83a4d4 0%, #b6fbff 100%);
}

.snow::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background-image:
    radial-gradient(white 2px, transparent 3px), radial-gradient(white 2px, transparent 3px),
    radial-gradient(white 2px, transparent 3px);
  background-repeat: repeat;
  background-position:
    0 0,
    50px 50px,
    100px 100px;
  background-size: 100px 100px;
  animation: snow-fall 10s linear infinite;
  opacity: 0.4;
}

.default-weather {
  background: #666;
}
